<template>
  <div>
    <h1>情况三:监视[reactive]定义的[对象类型]数据</h1>
    <h2>姓名{{ person.name }}</h2>
    <h2>年龄{{ person.age }}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <h2>{{ obj.a.b.c }}</h2>
    <button @click="test">修改了吗</button>
  </div>
</template>
<script setup lang="ts">
import { WatchDirectoryFlags } from "typescript";
import { reactive, watch } from "vue";

//数据
let person = reactive({
  name: "张三",
  age: 18,
});

let obj = reactive({
  a: {
    b: {
      c: "是否修改",
    },
  },
});

//方法
function changName() {
  person.name += "~";
}
function changAge() {
  person.age += 1;
}
function test() {
  obj.a.b.c = "是";
}
//老问题,以上三个都是没变地址只变数值(即new,old相同)

//弊端:区别于ref为首的对象类型,reactive不能整体修改(什么鸡肋玩意儿)
function changePerson() {
  Object.assign(person, { name: "Lisi", age: 18 }); //批量修改数值,相比于ref并非整体替换
}

//监视(默认开启深度监视(reactive))(不能关闭,隐式创建)
watch(person, (newVal, oldVal) => {
  console.log("person变化了", newVal, oldVal);
});

watch(obj, (newVal, oldVal) => {
  console.log("obj变化了", newVal, oldVal);
});
</script>
